<template>
  <div class="asilde">
    <div class="a-main">
      <ul class="a-u-main">
        <li v-for="(item, index) in mainMenuList" :key="item.menuID" @click="loadDetail($event,item.menuID,index)" :class="{ cssMainIsActive:index==cssMainIsActive }">
          <i :class="item.menuIcon"></i> {{ item.menuName }}
        </li>
      </ul>
    </div>
    <div class="a-detail">
      <ul class="a-u-detail">
        <li class="a-ul-broad" ><i class="el-icon"></i> {{detailTitle}}管理</li>
        <li v-for="item in detailMenuList" :key="item.menuID">
          <router-link  :to="item.menuLink"><i :class="item.menuIcon"></i> {{ item.menuName }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>


<script>
let _menu = require("@/assets/json/menu.json");
export default {
  name: "aslide",
  data() {
    return {
      menuList: [],
      mainMenuList: [],
      detailMenuList: [],
      detailTitle:'',
      cssMainIsActive:false
    };
  },
  methods: {
    initData() {
      //this.menuList = _menu
    },
    loadDetail:function(e,menuParentID,index){
        let that = this
        console.log(index)
        //当前模块名称
        that.detailTitle = that.menuList.filter(p=>p.menuID == menuParentID)[0].menuName
        //二级菜单
        that.detailMenuList = that.menuList.filter(p=>p.menuParentID==menuParentID)
        //索引  下标
        that.cssMainIsActive=index
    },
    routeDetail:function(){

    }
  },
  created() {
    //api接口
    // this.axios.get("MenuAPI/GetMenus").then((res) => {
    //       this.menuList = res.data.body;
    //       console.log(this.menuList);
    //       this.$store.commit("saveMenuList", res.data.body);
    //       //sessionStorage.getItem("menu",res.data.body)
    //       //一级菜单
    //       this.mainMenuList = this.menuList.filter((p) => p.menuParentID == "0");
    //     });
    this.menuList = _menu;
    console.log(this.menuList);
    //一级菜单
    this.mainMenuList = this.menuList.filter((p) => p.menuParentID == "0");
  },
};
</script>

<style scoped>
.asilde {
  width: 240px;
  background-color: #eaedf1;
  height: calc(100% - 62px);
  float: left;
  margin-left: -340px;
}
.a-main {
  height: 100%;
  width: 100px;
  float: left;
  background-color: #464c5b;
  color: white;
}

ul {
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-top: 20px;
}
ul,
li {
  list-style: none;
  padding: 0;
}

li {
  padding: 15px 0;
  cursor: pointer;
}

li a {
  text-decoration: none;
  color: rgb(83, 78, 78);
}

li:hover {
  background-color: rgb(190, 190, 186);
}

.a-ul-broad {
  background-color: #f2f2f2;
  cursor: default;
}
.cssMainIsActive {
  background-color: silver;
}
</style>